<template>
	<view class="preview">
		<swiper circular="true">
			<swiper-item v-for="item in detailWallList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill" @click="maskChange"></image>
			</swiper-item>
		</swiper>

		<view class="mask" v-show="maskShow">
			<view class="goBack" :style="{top:getStatusBarHeight() + 'px'}" @click="goBacks">
				<uni-icons type="back" size="20" color="#fff"></uni-icons>
			</view>
			<!-- <view class="count">3 / 5</view> -->
			<view class="time">
				<uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="Date.now()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box" @click="infoOpen">
					<uni-icons type="info" size="23"></uni-icons>
					<view class="text">信息</view>
				</view>

				<view class="box" @click="clickScore" v-for="item in detailWallList" :key="item._id">
					<uni-icons type="star" size="23"></uni-icons>
					<view class="text">{{item.score}}分</view>
				</view>

				<view class="box" @click="downloadWall">
					<uni-icons type="download" size="23"></uni-icons>
					<view class="text">下载</view>
				</view>
			</view>
		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="infoPopup" type="bottom">
			<view class="infoPopup">
				<view class="popHeader">
					<view class=""></view>
					<view class="title">壁纸信息</view>
					<view class="close" @click="infoClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true">
					<view class="content" v-for="item in detailWallList" :key="item._id">
						<view class="row">
							<view class="label">壁纸ID:</view>
							<text selectable="true" class="value">{{item._id}}</text> <!-- selectable文字是否可选 -->
						</view>

						<!-- <view class="row">
							<view class="label">分类：</view>
							<view class="value class">{{sort}}</view>
						</view> -->

						<view class="row">
							<view class="label">发布者：</view>
							<view class="value">{{item.nickname}}</view>
						</view>

						<view class="row">
							<view class="label">评分：</view>
							<view class="value roteBox">
								<uni-rate v-model="change" :readonly="true" />
								<text class="score">{{item.score}}分</text>
							</view>
						</view>

						<view class="row">
							<view class="label">摘要：</view>
							<view class="value">{{item.description}}</view>
						</view>

						<view class="row">
							<view class="label">标签：</view>
							<view class="value tabs">
								<view class="tab" v-for="tab in item.tabs" :key="tab">
									{{tab}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 评分弹窗 -->
		<uni-popup ref="scorePopup" :is-mask-click="false">
			<view class="scorePopup">
				<view class="popHeader">
					<view class=""></view>
					<view class="title">壁纸评分</view>
					<view class="close" @click="scoreClose">
						<uni-icons type="closeempty" size="18" color="#999" allowHalf="true"></uni-icons>
					</view>
				</view>

				<view class="content">
					<uni-rate v-model="userScore" />
					<text class="text">{{userScore}}分</text>
				</view>

				<view class="footer">
					<button :disabled="!userScore" type="default" size="mini" plain @click="scoreSubmit">确认评分</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getStatusBarHeight,
		getTitleBarHeight
	} from "@/utils/system.js";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		globalVariable
	} from '../All.js'
	var goBacks = () => {
		uni.navigateBack({
			delta: 1
		})
	};
	var maskShow = ref(true); // 定义变量
	var infoPopup = ref(null);
	var change = ref(3.5);
	var scorePopup = ref(null);
	var userScore = ref(0);
	// var sort = ref('明星美女')

	// 遮罩层
	var maskChange = () => {
		maskShow.value = !maskShow.value;
	};

	// footer弹窗
	// 壁纸信息
	var infoOpen = () => {
		infoPopup.value.open();
	};
	var infoClose = () => {
		infoPopup.value.close();
	};
	// 评分
	var clickScore = () => {
		scorePopup.value.open()
	};
	var scoreClose = () => {
		scorePopup.value.close()
	}
	var scoreSubmit = () => {
		console.log('评分:' + userScore.value);
		setupScore();
	}

	var queryParams = {};
	onLoad((e) => {
		// console.log(e);
		var {
			id = null
		} = e; // 解构e获取id
		queryParams.id = id
		// console.log(queryParams.id);
		// uni.setNavigationBarTitle({
		// 	title: name
		// })
		getDetailWall().then(() => {
			// 在异步请求完成后执行的操作
			console.log(detailWallList.value);
			if (detailWallList.value && detailWallList.value.length > 0) {
				queryParams.classid = detailWallList.value[0].classid;
			}
		});
	})


	// 壁纸详细
	var detailWallList = ref([])

	var getDetailWall = async () => {
		var res = await uni.request({
			url: globalVariable().url + 'detailWall',
			header: {
				"access-key": globalVariable().accessKey
			},
			data: {
				id: queryParams.id,
			}
		})
		// console.log(res.data.data);
		if (res.data.errCode === 0) {
			var url = res.data.data[0].smallPicurl;
			const newUrl = url.replace('_small.webp', '.jpg');
			// 遍历数组并替换 smallPicurl 的内容
			res.data.data.forEach(item => {
				item.smallPicurl = newUrl;
			});

			// console.log(res.data.data);
			// 查询成功
			detailWallList.value = res.data.data;
			// console.log(detailWallList.value[0].classid);
		}
	}


	// 为壁纸评分
	var setupScore = async () => {
		var res = await uni.request({
			url: globalVariable().url + 'setupScore',
			header: {
				"access-key": globalVariable().accessKey
			},
			data: {
				classid: queryParams.classid,
				wallId: queryParams.id,
				userScore: userScore.value
			}
		})
		// console.log(res);
		if (res.data.errCode === 0) {
			// 查询成功
			uni.showToast({
				title: res.data.errMsg,
				duration: 2000
			});
		} else {
			// 评过分
			uni.showToast({
				title: '已经评过分了',
				icon: 'error',
				duration: 2000
			});
		}
	}

	// 下载壁纸
	var downloadWall = () => {
		// console.log('下载成功');
		// #ifdef H5
		uni.showModal({
			content: '长按保存！',
			showCancel: false
		})
		// #endif


		// #ifndef H5
		// console.log(Picurl.url);
		try {
			apiWriteDownload();

			uni.getImageInfo({
				src: detailWallList.value[0].smallPicurl,
				success: function(image) {
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: function() {
							uni.showToast({
								title: '下载成功',
								duration: 2000
							});
							// console.log('save success');
						},
						fail: (err) => {
							if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
								uni.showModal({
									title: '下载失败，请重新下载！！',
									icon: 'none'
								})
								return;
							}
							uni.showModal({
								title: '授权提示',
								content: '需要授权保存相册',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (setting) => {
												// console.log(setting);
												if (setting
													.authSetting[
														'scope.writePhotosAlbum'
													]) {
													uni.showToast({
														title: '获取授权成功',
														icon: 'none'
													})
												} else {
													uni.showToast({
														title: '获取权限失败',
														icon: 'none',
													})
												}
											}
										})
									}
								}
							})
						}
					});
				}
			});
		} catch (err) {
			console.log(err);
		}



		// #endif
		// downloadWall();
	}



	// 避免重复下载/记录下载记录
	var apiWriteDownload = async () => {
		var res = await uni.request({
			url: globalVariable().url + 'downloadWall',
			header: {
				"access-key": globalVariable().accessKey
			},
			data: {
				classid: queryParams.classid,
				wallId: queryParams.id,
			}
		})
		console.log(res);
	}
</script>

<style lang="scss" scoped>
	.preview {
		width: 100%;
		height: 100vh;
		position: relative;

		swiper {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mask {
			&>view {
				position: absolute;
				width: fit-content; // 有多少那内容宽度就多大
				left: 0;
				right: 0;
				margin: auto;
				color: #fff;
			}

			.goBack {
				width: 50rpx;
				height: 50rpx;
				background: rgba(0, 0, 0, 0.5);
				left: 30rpx;
				margin-left: 0;
				border-radius: 100px;
				top: 0;
				backdrop-filter: blur(10rpx);
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.count {
				top: 10vh;
				background: rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(10rpx);
				font-size: 28rpx;
				border-radius: 40rpx;
				padding: 8rpx 28rpx;
			}

			.time {
				font-size: 140rpx;
				top: calc(10vh + 80rpx);
				font-weight: 400;
				line-height: 1em;
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
			}

			.date {
				font-size: 34rpx;
				top: calc(10vh + 260rpx);
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
			}

			.footer {
				background: rgba(255, 255, 255, 0.8);
				bottom: 10vh;
				height: 120rpx;
				width: 65vw;
				border-radius: 120rpx;
				color: #000;
				display: flex;
				justify-content: space-around;
				align-items: center;
				box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(20rpx);

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 2rpx 12rpx;

					.text {
						font-size: 25rpx;
						color: #676767;
					}
				}
			}
		}

		.popHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: #676767;
				font-size: 26rpx;
			}

			.close {
				padding: 6rpx;
			}
		}

		.infoPopup {
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;

			scroll-view {
				max-height: 60vh;

				.content {
					.row {
						display: flex;
						padding: 16rpx 0;
						font-size: 32rpx;
						line-height: 1.7em;

						.label {
							color: #a7a7a7;
							width: 170rpx;
							text-align: right;
							font-size: 30rpx;
						}

						.value {
							flex: 1;
							width: 0;
						}

						.roteBox {
							display: flex;
							align-items: center;

							.score {
								font-size: 26rpx;
								color: #a7a7a7;
								padding-left: 10rpx;
							}
						}

						.tabs {
							display: flex;
							flex-wrap: wrap;

							.tab {
								color: #23b389;
								border: 1px solid #23b389;
								font-size: 22rpx;
								padding: 10rpx 30rpx;
								border-radius: 40rpx;
								line-height: 1em;
								margin: 1 10rpx 10rpx 0;
							}
						}

						.class {
							color: #23b389;
						}
					}
				}
			}
		}

		.scorePopup {
			background: #fff;
			padding: 30rpx;
			width: 70vw;
			border-radius: 30rpx;

			.content {
				padding: 30rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.text {
					color: #ffca3e;
					padding-left: 10rpx;
					width: 80rpx;
					line-height: 1em;
					text-align: right;
				}
			}

			.footer {
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>